const path = require('path');
// 启用热更新的 第2步
const webpack = require('webpack');
// 导入在内存中生成 HTML 页面的 插件
// 只要是插件，都一定要 放到 plugins 节点中去
// 这个插件的两个作用：
//  1. 自动在内存中根据指定页面生成一个内存的页面
//  2. 自动，把打包好的 bundle.js 追加到页面中去
const htmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');//引包


module.exports = {
	entry : path.join(__dirname , './src/main.js'),
	output : {
		path : path.join(__dirname , './dist'),//输出路径
		filename : 'bundle.js'//指定输出文件
	},
	mode: "development", // 开发模式
  	devtool: "source-map", // 开启调试
	devServer : {
		open : true,//自动打开浏览器
		port : 8080,//端口号
		contentBase : 'src',//指定托管的目录 文件在内存中放到哪了
		//webpack dev server把编译的内容放在内存，而contentBase会作为硬盘上的文件的搜索路径，webpack dev server会首先去contentBase上搜索文件，没有再到内存查找
		hot : true,//启动热更新的一步
		proxy : {
			"/index.php" : {
				target : "'http://wallpaper.apc.360.cn",
				changeOrigin : true
			},
			'/news' : {
				target : 'http://api.jisuapi.com',//域名
				changeOrigin : true,//启动默认false
			},
			"/channel" : {
				target : "http://image.baidu.com",
				changeOrigin : true,//启动默认false
			},
			
		}
	
	},
	plugins : [//配置插件的节点
	 new webpack.HotModuleReplacementPlugin(), // new 一个热更新的 模块对象， 这是 启用热更新的第 3 步
	new htmlWebpackPlugin({//创建一个在内存生成HTML的插件
		template : path.join(__dirname , './src/index.html'),// 指定 模板页面，将来会根据指定的页面路径，去生成内存中的 页面 放在哪了
		filename : 'index.html'//指定生成的页面 默认是index.html
		//用于生成的HTML文件的名称，默认是index.html。你可以在这里指定子目录（例如:assets/admin.html）
	}),
	 new VueLoaderPlugin()//配置vue
	],
	module : {//这个节点 用于配置 所有的 第三方模块 加载器
		rules : [//所有的第三方模块的 匹配规则
			{ test : /\.css$/ , use: ['style-loader' , 'css-loader'] },//配置处理 .css的loader
			{ test : /\.less$/ , use : ['style-loader' , 'css-loader' , 'less-loader']},
			{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
			{ test : /\.js$/ , use : 'babel-loader' , exclude : /node_modules/}, // 配置 Babel 来转换高级的ES语法
			{ test : /\.(jpg|png|gif|bmp|jpeg)$/ , use : 'url-loader?limit=7631$name=[hash:8]-[name].[ext]' },
			 // 处理 图片路径的 loader
      // limit 给定的值，是图片的大小，单位是 byte， 如果我们引用的 图片，大于或等于给定的 limit值，则不会被转为base64格式的字符串， 如果 图片小于给定的 limit 值，则会被转为 base64的字符串
      		{ test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, // 处理 字体文件的 loader 
      		{ test : /\.vue$/ , use : ['vue-loader']},//处理vue
		]

	},
	resolve : {
		alias : {//// 修改 Vue 被导入时候的包的路径
			"vue$" : 'vue/dist/vue.js'
		}
	}

}